<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触摸控制屏</title>
</head>
<body>

<script src="lib/jquery-3.2.1.js"></script>
<script src="plugin/messenger/js/messenger.js"></script>
<script src="plugin/messenger/js/messenger-theme-future.js"></script>
<script src="plugin/bootstrap/js/bootstrap.js"></script>

<script src="lib/socket.io.js"></script>
<link rel="stylesheet" href="plugin/messenger/css/messenger.css">
<link rel="stylesheet" href="plugin/messenger/css/messenger-theme-future.css">
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" href="css/default.css">

<script>
    var boot={
      bootSuccess: false,
      init: function(){
        this.initMessenger();
        this.initWs()
      },
      initMessenger: function(){
        Messenger.options = {
          extraClasses: 'messenger-fixed messenger-on-top',
          theme: 'future',
          showCloseButton: true

        }
        this.show = (msg,failure) => {
          Messenger().post({
            message: msg,
            type: failure ? 'error':'success',
            showCloseButton: true
          });
        }
      },
      initWs: function(){
        // init socket
        this.socket = io('http://10.0.1.135:3000/fromTOUCHscreen');
        this.socket.on('connect', ()=>{
          this.bootSuccess = true
          this.show("websocket 建立成功!")
          // process the received
          this.socket.emit("message",'huhai ')
        });
        this.socket.on('disconnect', ()=>{
          this.show('websocket 链接断开!',true)
        });
        this.socket.on('error', ()=>{
          this.show('websocket error!',true)
        });
        this.socket.on('message',  (data)=> {
          console.log('接收到信息: ' +data)
          this.show('接收到信息： '+data)
        });
      }
    }
    boot.init()
</script>







<div class="flex_container_default control_buttons_container" id="container">
    <div class="flex_container_default">
        <button type="button" class="btn btn-info" action="open-pic-1">打开图片</button>

    </div>
    <div class="flex_container_default">
        <button type="button" class="btn btn-info" action="open-video-1">打开视频</button>

    </div>
    <div class="flex_container_default">
        <button type="button" class="btn btn-info" action="open-website-1">跳转网页</button>

    </div>
</div>


<script>
    $(document).ready(function(){
      // after ready
      $("button").click(function(){
        let action = $(this).attr('action');
        if(action){
          boot.show('正在发送action: '+action)
          boot.bootSuccess && boot.socket.emit("action", action)
        }else{
          boot.show("当前button没有配置action")
        }
      })
    })
</script>
<style>
    body{
        padding:2em;
    }
</style>

</body>
</html>